<template>
	<div>
		<!-- https://blog.csdn.net/qq_22317389/article/details/80391265 + - zujian -->
  <div class="shopcart">
      <div class="content" @click="toggleList">
        	<!--content-left-->
        	<div class="contentleft">
        		<div class="logo-wrapper">
        			<div class="logo" :class="{'highlight':totalCount>0}">
        				<i class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></i>
        			</div>
        			<div class="num" v-show="totalCount>0">{{totalCount}}</div>
        		</div>
        		<div class="price" :class="{'highlight':totalCount>0}">&yen;{{totalPrice}}</div>
            <div class="desc">另需配送费&yen;{{deliveryPrice}}元</div>
          </div>
          <!--content-right-->
        	<div class="contentright" @click.stop.prevent="pay">
        		 <div class="pay" :class="payClass">{{payDesc}}</div>
        	</div>
      </div>
      <!--定义一个动画小球-->
     <div class="ball-container">
		<!-- 小球的动画组件 -->
		<div v-for="(ball,index) in balls" v-show="ball.show" class="ball"  :key="ball.index">
			<transition-group name="drop" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
				<div class="ball" v-for="(ball,index) in balls" v-show="ball.show" :key="ball.index">
				   <div class="inner inner-hook"></div> <!--购物车小球样式 -->
				</div>
			</transition-group>
		</div>
     </div>
     <!--定义购物车下拉组件-->
     <transition name="fa" mode="">
	      <div class="shopcart-list" v-show="listshow">
	      	 <!--top-->
	      	<div class="list-header border-bottom">
	      		<div class="title">购物车</div>
	      		<div class="empty" @click="empty">清空</div>
	      	</div>
	        <!--center-->
		      <div class="list-content" ref="listcontent">
		      	<ul>
					<li class="food border-bottom" v-for="(food,index) in selectFoods" :key="index">
						<span class="name">{{food.name}}</span>
						<div class="price">
								<span>&yen;{{food.price*food.count}}</span>
						</div>
						<div class="cartcontrol-wrapper" >
							<cartcontrol  @cart="cat" :food="food"></cartcontrol>
						</div>
					</li>
		      	</ul>
		      </div>
	      </div>
     	</transition>

  </div>
  <!--遮罩层-->
     <transition name="zm">
		  <div class="list-mask" v-show="listshow" @click="hideList"> </div>
		 </transition>	
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import cartcontrol from '@/components/cartcontrol/cartcontrol'
export default {
  name: 'shopcart',
  props: {
  	selectFoods:{ //从goods传递过来所选商品的信息（价格 条数 ）
  		 type:Array,
  		 default(){
  		 	return [];
  		 }
  	},
    deliveryPrice: { //配送
        type: Number,
        default: 0
      },
    minPrice: { //起送
        type: Number,
        default: 0
      }
  },
  data () {
    return {
     	balls:[{
            show: false,
						index:1
          },
          {
            show: false,
						index:2
          },
          {
            show: false,
						index:3
          },
          {
            show: false,
						index:4
          },
          {
            show: false,
						index:5
          }],
          dropBalls:[], //已经下落的小球
          fold:true
    }
  },
  methods:{
  	drop(el){//goods.vue 调用了我_drop() this.$refs.shopcart.drop(target)
			for(let i=0;i<this.balls.length;i++){ //循环遍历小球 第一个为false
				let ball=this.balls[i]
				if(!ball.show){   //假如为false 就变为true
					ball.show=true;
					ball.el=el;
					this.dropBalls.push(ball)
					return;
				 }
			}
		},
		toggleList(){//何时消失提示下拉框
			if(!this.totalCount){
        return
			}
			this.fold=!this.fold;
	  },
	  hideList(){//点击遮罩层事件
	  	this.fold=true;
		},
	  pay(){//结算按钮
			if(this.totalPrice<this.minPrice){
			return
		  }
			window.alert(`支付${this.totalPrice}元`);
	  },
 
  beforeEnter: function (el) {
		let count = this.balls.length;
			while (count--) {
				let ball = this.balls[count];
				if (ball.show){ //这个是要运动的小球true
						let rect = ball.el.getBoundingClientRect();//获得元素相当于视口的位置
						let x = rect.left - 32;
						let y = -(window.innerHeight - rect.top - 22);
						el.style.display = ''; //v-show默认display：none，设置为空，让它显示
						//外层元素是纵向的动画，内层元素是横向的动画
						el.style.webkitTransform = `translate3d(0,${y}px,0)`;
						el.style.transform = `translate3d(0,${y}px,0)`;
						let inner = el.getElementsByClassName('inner-hook')[0];
						inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
						inner.style.transform = `translate3d(${x}px, 0, 0)`;
			}
		}
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
      //  触发浏览器重绘
		  let rf = el.offsetHeight; 
			this.$nextTick(() => { //样式重置
					el.style.webKitTransform = 'translate3d(0,0,0)';//没有变量时只能用单引，不能用反引
					el.style.transform = 'translate3d(0,0,0)';
					let inner = el.getElementsByClassName('inner-hook')[0];
					inner.style.webkitTransform = 'translate3d(0,0,0)';
					inner.style.transform = 'translate3d(0,0,0)';
					el.addEventListener('transitionend', done); //样式重置
			});       
  },
  afterEnter:function (el) {
    let ball = this.dropBalls.shift();//删除并返回第一个ball
		if (ball) {
				ball.show = false; //重置ball.show的状态
				el.style.display = 'none';
		}
  },
	cat(event){
		this.$emit('cart', event);
	},
  empty(){//清空购物车
  	this.selectFoods.forEach((food)=>{
  		food.count=0;
  	})
  }	
  },
  computed:{
  	totalPrice(){ //循环计算件数*单价=总价
  		 let total=0;
  		 this.selectFoods.forEach((food)=>{
  		 	  total+=food.price*food.count;
  		 })
  		 return total;
  	},
  	totalCount(){//所选商品数量件数总和
  		let count=0;
  		this.selectFoods.forEach((food)=>{
  			count+=food.count;
  		});
  		return count;
  	},
	  payDesc(){ //商品起送价的 不同颜色状态
		 if(this.totalPrice===0){  //为0
		 	return `¥${this.minPrice}元起送`;
		 }else if(this.totalPrice<this.minPrice){ //不足起送价
		 	let diff=this.minPrice-this.totalPrice;
		 	return `还差¥${diff}元起送`
		 }else{//满足条件
		 	return '去结算'
		 }
	  },
	payClass(){ //判断 结算按钮 显示什么样的颜色
		if(this.totalPrice<this.minPrice){ //总价小于起送价
			return 'not-enough'
		}else{
			return 'enough'
		}
	},
	listshow(){//判断下拉框展开还是折叠
		 if(!this.totalCount){
		 			this.fold=true;
		 			return false;
		 }else{ //计算属性关联这 fold
		 	  let show=!this.fold;
				// console.log('show',show)
		 	  //只有当列表展示才可以点击
				if(show){
					this.$nextTick(()=>{  //没有渲染就点击渲染
						if(!this.scroll){
							console.log(this.scroll)
								this.scroll=new BScroll(this.$refs.listcontent,{
									click:true
								});
						}else{ //如果已经渲染就 调用接口
						// console.log(this.scroll)
							this.scroll.refresh()
						}
					
					})
				}
				
		 	  return show
		 }
	}
	
 },
  components:{
   	cartcontrol
   }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
		@import "../../common/stylus/border.css";
		@import "../../common/stylus/icon.less";		
		.shopcart{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 50;
			width: 100%;
			height: 48px;
			background: #000;
			.content{
				display: flex;
				background: #141d27;
				color: rgba(255,255,255,.4);
				.contentleft{
					flex: 1;
					.logo-wrapper{
						display: inline-block;
						vertical-align:top;
					  position: relative;
					  top:-10px;
					  margin:0 12px;
					  padding:6px;
					  width:56px;
					  height:56px;
					  box-sizing:border-box;
					  border-radius:50%;
					  background:rgb(20,29,39);		
					  z-index:98;				
						.logo{
							width: 100%;
							height: 100%;
							border-radius:50%;
							background:#2b343c;
							text-align:center;
							&.highlight{
								background: rgb(0,160,220);
							}
							.icon-shopping_cart{
								font-size:24px;
								color:#80858a;
								line-height: 44px;
								&.highlight{
									color: #FFFFFF;
								}
							}		
						}
						.num{
							position: absolute;
							top: 0;
							right: 0;
							width: 24px;
							height: 16px;
							line-height: 16px;
							text-align: center;
							border-radius:18px;
							font-weight: 700;
							z-index: 100;
							font-size: 9px;
							color: #fff;
							background: rgb(240,20,20);
							box-shadow: 0 4px 08px 0 rgba(0,0,0,0.4);
						}
					}
					.price{
						display: inline-block;
						vertical-align: top;
						line-height: 24px;
						padding-right: 12px;
						box-sizing:border-box;
						font-size:16px;
						font-weight: 700;
						color:rgba(255,255,255,0.4);
						margin-top: 12px;
						&.border-right{
							background: rgba(255,255,255,.1);
						}
						&.highlight{
							color: #FFFFFF;
						}
					}
					.desc{
						display: inline-block;
						margin: 12px 0 0 12px;
						line-height: 24px;
						vertical-align:top;
						color: rgba(255,255,255,.4);
						font-size: 10px;
					}
				}
				.contentright{
					flex: 0 0 120px;
					width: 120px;
					.pay{
						line-height: 48px;
						height: 48px;
						text-align: center;
						font-size: 12px;
						font-weight: 700;
						background:#2b333b;
						&.not-enough{
							background: #2b333b;
						}
						&.enough{
							background:#00b43c;
							color: #FFFFFF;
						}
					}
					
				}
			}
			.ball-container{
				.ball{
					  position: fixed;
			      left: 32px;
			      bottom: 22px;
			      z-index: 200;
					  .inner{
						width: 16px;
						height: 16px;
						border-radius:50% ;
						background:  rgb(0,160,220);
						transform: all .4s linear;
						}
						&.drop-enter-active,&.drop-leave-active {
							transition: all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41);
						.inner {
							transition: all 0.4s linear;
						}
	    	  }
				}
			}
			.shopcart-list{
				position:absolute;
				top: 0;
				left: 0;
				z-index:10;
				width: 100%;
				transform :translate3d(0, -100%, 0) ;
				&.fa-enter-active,&.fa-leave-active {
						transition: all .2s linear ;
						transform:translate3d(0,-100%,0) //每个表项相对于当前自身的高度做一个偏移
				}
				&.fa-enter,&.fa-leave-to{
					  z-index:-1;
					  transition: all .2s linear ;
						transform:translate3d(0, 0, 0);
				}
				.list-header{
					height: 40px;
					line-height: 40px;
					padding: 0 18px;
					background: #f3f5f7;
					&.border-bottom{
					border-bottom:	1px solid rgba(7,17,27,0.1);
					.title{
						float: left;
						font-size: 14px;
						color: rgb(7,17,27);
					}
					.empty{
						float: right;
						font-size: 12px;
						 color: rgb(0, 160, 220)
					}
				}
			  }
			  .list-content{
			  	 padding: 0 18px;
			  	 max-height: 217px;
			  	 background: #FFFFFF;
			  	 overflow: hidden;
			  	 .food{
			  	 	position: relative;
			  	 	padding: 12px 0;
			  	 	box-sizing: border-box;
			  	 	.name{
			  	 		line-height: 24px;
			  	 		font-size: 14px;
			  	 		color: reg(7,17,27);
			  	 	}
			  	 	.price{
			  	 		position: absolute;
			  	 		right: 91px;
			  	 		bottom: 12px;
			  	 		line-height: 20px;
			  	 		font-size: 14px;
			  	 		font-weight: 700px;
			  	 		color: rgb(240,20,20);
			  	 	}
			  	 	.cartcontrol-wrapper{
			  	 		position: absolute;
			  	 		right: 0;
			  	 		bottom: 6px;
			  	 	}
			  	 }
			  }
				
			}
		}
		.list-mask{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 49;
			backdrop-filter:blur(10px);
	   	background:rgba(7,17,27,0.6);
			&.zm-enter,&.zm-leave-to{
				opacity: 0;
				background:rgba(7,17,27,0);
			}
			&.zm-enter-active,&.zm-leave-active{
				transition: all .3s;
				background:rgba(7,17,27,0.6);
			}
    }
</style>
